<template>
	<view v-if="false" class="container">
		<scroll-view class="container_scroll" scroll-y="true" :scroll-top='swiperContentHeight' scroll-with-animation @scroll="scrollContainer">
			<view class="nav">
				<view class="content">
					<view class="user">
						<view>
							<view class="name">{{ studioDetail.name }}</view>
							<view class="address xjs-line-two">
								<text class="distance">
									{{ studioDetail.distance }}
								</text>
								<text class="ge">|</text>
								<text class="address_conpent">
									{{ studioDetail.area + studioDetail.address }}
								</text>
							</view>
						</view>
						<image :src="studioDetail.avatar" mode=""></image>
					</view>
					<view class="introduce xjs-line-two" @tap="openPop">
						{{ studioDetail.introduce }}
					</view>
					<image
						class="list"
						:src="url + 'icon-103.png'"
						mode=""
					></image>
				</view>
			</view>
			<view class="function">
				<view class="function_nav">
					<view :class="{ active: current == 0 }" @click="changeCurrent(0)">
						<text>服务</text>
						<image :src="url + 'icon-101.png'"></image>
					</view>
					<view
						:class="{ active: current == 1 }"
						@click="changeCurrent(1)"
					>
						<text>陪宠师</text>
						<image :src="url + 'icon-101.png'"></image>
					</view>
					<view
						:class="{ active: current == 2 }"
						@click="changeCurrent(2)"
					>
						<text>日常</text>
						<image :src="url + 'icon-101.png'"></image>
					</view>
					<view
						:class="{ active: current == 3 }"
						@click="changeCurrent(3)"
					>
						<text>评价</text>
						<image :src="url + 'icon-101.png'"></image>
					</view>
				</view>
				<view class="service productBox0">
					<serviceItem v-if="serviceList.length!=0" :list='serviceList'></serviceItem>
				</view>
				<view class="team productBox1">
					<view class="team_title">
						<view class="name">
							陪宠师团队
							<text>({{ teamListTotal.teamCount }})</text>
						</view>
						<view class="seeTo" @tap="toTeam">
							<text>查看更多</text>
							<uni-icons
								type="right"
								:color="'#1A1A1A'"
								:size="20"
							></uni-icons>
						</view>
					</view>
					<image
						class="banner"
						:src="banner"
						@click="applyFor"
					></image>
					<scroll-view class="team_scroll" scroll-x="true">
						<view
							class="item"
							v-for="item in teamList"
							:key="item.id"
							@tap="toDailyServiceIndex(item.userId)"
						>
							<image :src="item.user.avatar" mode=""></image>
							<view class="name xjs-line-one">
								{{ item.user.nickName }}
							</view>
							<view class="describe">
								{{ item.user.petsitterIntroduce }}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="dailyService team productBox2">
					<view class="team_title">
						<view class="name">
							服务日常
							<text>({{ teamListTotal.serviceDailyCount }})</text>
						</view>
						<view class="seeTo" v-if="teamListTotal.serviceDailyCount" @tap="toDailyService">
							<text>查看全部</text>
							<uni-icons type="right" :color="'#1A1A1A'" :size="20"></uni-icons>
						</view>
					</view>
					<dailyServiceItem v-if="dailyService.length!=0" :list='dailyService'></dailyServiceItem>
					<loadMore v-else :status="'empty'" />
				</view>
				<view class="serviceEvaluation team productBox3">
					<view class="team_title">
						<view class="name">
							服务评价
							<text>({{ evaluateListTotal }})</text>
						</view>
						<view class="seeTo" @tap="toEvaluate" v-if="evaluateList.length!=0">
							<text>查看全部</text>
							<uni-icons
								type="right"
								:color="'#1A1A1A'"
								:size="20"
							></uni-icons>
						</view>
					</view>
					<evaluateItem v-if="evaluateList.length!=0" :list="evaluateList"></evaluateItem>
					<loadMore v-else :status="'empty'" :text="'暂时还没有服务评价'" />
				</view>
			</view>
		</scroll-view>
		<view class="footer">
			<view @click="onlineConsultation">在线咨询</view>
			<view @tap="scrollFu">预约下单</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" safe-area  background-color='#fff'>
			<view class="popups">
				<view class="title"><text></text><view>工作室介绍</view><uni-icons @tap="closePop" type="closeempty" :color="'#1A1A1A'" :size="20"></uni-icons></view>
				<view class="content">{{studioDetail.introduce}}</view>
			</view>
			
		</uni-popup>
		<!-- <image class="share" :src="url+'icon-87.png'" mode=""></image> -->
	</view>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import api from '@/api'
import BigNumber from 'bignumber.js'
import { onShow, onLoad,onShareAppMessage, onShareTimeline  } from '@dcloudio/uni-app'
import { useUserStoreToRefs } from '@/store/useUserStore'
import evaluateItem from '../components/evaluate-item/index.vue'
import dailyServiceItem from '../components/dailyService-item/index.vue'
import serviceItem from '../components/service-item/index.vue'
import configs from '@/config'
const url = ref<string>('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')
const { shareRefereeId,userInfo } = useUserStoreToRefs()
onShareAppMessage(() => {
	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&data1=${studioId.value}&type=3`
	return {
		title: "",
		path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
		imageUrl: ""
	}
})
onShareTimeline(() => {
	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&data1=${studioId.value}&type=3`
	return {
		title: "",
		path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
		imageUrl: ""
	}
})


onLoad(async (e) => {
	studioId.value = e.id
	//后续没问题 直接废弃这个页面，把这个路由全部直接换成pages/home/index
	uni.reLaunch({
		url: '/pages/home/index'
	})
	// await getDetails()
})

const studioId = ref<number>(0) //工作室id
const studioDetail = ref<studioDetailType>({
	name: '',
	introduce: '',
	avatar: '',
	realDistance: '',
	province: '',
	city: '',
	area: '',
	address: '',
	distance: ''
}) // 工作室详情数据
const ipConfig = ref({ longitudes: '', latitudes: '' }) //当前经纬度
//获取工作室详情
const getDetails = async () => {
	const res1: any = await getLocation()
	if (res1) {
		ipConfig.value.longitudes = res1.longitude
		ipConfig.value.latitudes = res1.latitude
	}
	const res: any = await api({
		method: 'get',
		url: `/mall/studio/getStudioDetail/${studioId.value}`,
		data: {
			longitudes: ipConfig.value.longitudes,
			latitudes: ipConfig.value.latitudes
		}
	})
	if (res) {
		if(res.data.status==1){
			uni.showToast({
				icon: 'none',
				title: '工作室已关闭',
				success() {
				   uni.switchTab({
				   	url:'/pages/home/index'
				   })	
				}
			})
			return
		}
		studioDetail.value = res.data
		studioDetail.value.distance =
			Number(res.data.realDistance) >= 1000
				? new BigNumber(res.data.realDistance)
						.div(1000)
						.toNumber()
						.toFixed(2) + 'km'
				: res.data.realDistance + 'm'
		await getStudioServiceList()
		await getEvaluateListList()
		await getTeamList()
		await getAllCount()
		await config()
		await getOrderServiceSaily()
		await nextTick(()=>{
			 getHeightArr()
		})
	}
}

//获取服务列表
const serviceList = ref<serviceListType[]>([]) //服务列表
const getStudioServiceList = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/goods/studio-goods/getGoodsByStudioId/${studioId.value}`,
		data:{
			flag:1
		}
	})
	if (res) {
		serviceList.value = res.data
	}
}
//介绍弹框
const popup  = ref(null)
const openPop = ()=>{
	popup.value.open()
}
const closePop = ()=>{
	popup.value.close()
}

//获取陪宠师团队列表
const teamList = ref<teamListType[]>([]) //服务列表
const teamListTotal = ref<{ teamCount: string; serviceDailyCount: string }>({
	teamCount: '',
	serviceDailyCount: ''
}) //陪宠师数量
const getTeamList = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/studio/petsitter-team/homePage`,
		data: {
			studioId: studioId.value
		}
	})
	if (res) {
		teamList.value = res.data
	}
}
//获取陪宠师数量
const getAllCount = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/studio/petsitter-team/getAllCount`,
		data: {
			studioId: studioId.value
		}
	})
	if (res) {
		teamListTotal.value = res.data
	}
}
//去陪宠师主页
const toDailyServiceIndex = (id: string) => {
	uni.navigateTo({
		url: '/pages/studio/petCompanionTeacherIndex/index?userId=' + id + '&studioId=' + studioId.value
	})
}
//跳转团队
const toTeam = () => {
	uni.navigateTo({
		url: '/pages/studio/team/index?studioGoodsId=' + studioId.value
	})
}
//跳转申请陪宠师
const applyFor = () => {
	uni.navigateTo({
		url:
			'/pages/applyPetTeacher/index/index?id=' + studioId.value
	})
}

const dailyService = ref([]) //服务日常数据列表
//获取服务日常
const getOrderServiceSaily = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/order-service-daily/homePage`,
		data: {
			studioId: studioId.value
		}
	})
	if (res) {
		dailyService.value = res.data
	}
}



//跳转全部陪宠师
const toDailyService = () => {
	uni.navigateTo({
		url: '/pages/studio/dailyService/index?studioGoodsId=' + studioId.value
	})
}


//获取评论列表
const evaluateList = ref<evaluateListType[]>([]) //评论列表
const evaluateListTotal = ref(0)
const getEvaluateListList = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/order/assess/page`,
		data: {
			page: 1,
			limit: 6,
			studioId: studioId.value
		}
	})
	if (res) {
		evaluateList.value = res.data.records
		evaluateListTotal.value = res.data.total
	}
}
//跳转评论列表
const toEvaluate = () => {
	uni.navigateTo({
		url: '/pages/studio/serviceEvaluation/index?studioId=' + studioId.value
	})
}

//获取配置
const banner = ref<string>('')
const config = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/content/backend-configs/getHomeConfig`
	})
	if (res) {
		banner.value = res.data['xjs.content.contentConfig.recruitShareBanner']
	}
}
//跳转在线咨询
const onlineConsultation = () =>{
	if(!userInfo.value){
			uni.showToast({
				icon: 'none',
				title: '登录后即可咨询'
			});
	}else{
		uni.navigateTo({
			url: `/pages/im/message/index?id=${teamList.value[0].userId}&username=${teamList.value[0].user.nickName}&avatar=${teamList.value[0].user.avatar}`
		})
	}
	
}
//跳转服务tab
const old = ref({scrollTop:0})
const scrollFu = ()=>{
	// changeCurrent(0)
	swiperContentHeight.value = old.value.scrollTop
	nextTick(()=> {
		changeCurrent(0)
	});
}
const current = ref<number>(0) //tab滑块索引
//点击tab
const changeCurrent = (index: number) => {
	current.value = index
	swiperContentHeight.value =  heightArr.value[index]
}


//获取经纬度
const getLocation = async () => {
	return new Promise((resolve, reject) => {
		uni.getLocation({
			type: 'gcj02',
			success: function (res) {
				resolve(res)
			},
			fail() {
				resolve(false)
			}
		})
	})
}

const swiperContentHeight = ref<number>(0)
const heightArr = ref([])

const getHeightArr = async () =>{
	heightArr.value = []
	for(let i=0;i<4;i++){
		computedSwiperHeight(i)
	}
}
//页面滚动高度
const scrollContainer = (e)=>{
	let scrollTop = e.detail.scrollTop + 80
	let arr = [...heightArr.value,scrollTop]
	arr.sort(function(a,b){
		return a-b
	})
	if(arr.indexOf(scrollTop)>=1){
		current.value = arr.indexOf(scrollTop)-1
	}
	
}
// 商品列表高度计算
const computedSwiperHeight = async (num) => {
	nextTick(() => {
		let selectQuery = `.productBox${num}`
		
		// #ifdef MP-WEIXIN
		const query = wx.createSelectorQuery()
		// #endif
		// #ifndef MP-WEIXIN
		const query = tt.createSelectorQuery()
		// #endif
		query.select(selectQuery).boundingClientRect()
		query.selectViewport().scrollOffset()
		query.exec((res) => {
			heightArr.value[num] = res[0].top - 100
		})
	})
}
//工作室详情数据
interface studioDetailType {
	name: string
	introduce: string
	avatar: string
	realDistance: string
	province: string
	city: string
	area: string
	address: string
	distance: string
}
//服务列表数据定义
interface serviceListType {
	id: string
	thumPic: string
	name: string
	description: string
	price: string
	goods: any
	petRangeMarkUp: any
	petNumMarkUp: any
}
//陪宠师团队列表
interface teamListType {
	id: string
	nickName: string
	avatar: string
	petsitterIntroduce: string
	user: any
}
//评论列表数据定义
interface evaluateListType {
	userAvatar: string
	nickName: string
	createTime: string
	id: string
	count: number
	createTimeStr: string
	content: string
	ifAnonymous: number
}
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	line-height: 1;
	padding-bottom: calc(110rpx + var(--safe-area-bottom));
	// background: #F9F6F6;
	.container_scroll{
		height: calc(100vh - var(--safe-area-bottom) - 104rpx);
	}
}
.nav {
	width: 100%;
	// height: 420rpx;
	padding: 32rpx 32rpx 0;
	box-sizing: border-box;
	background: url(https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-105.png) no-repeat;
	background-size: 100% 100%;
	.content {
		border-radius: 24rpx;
		border: 2rpx solid #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(182, 105, 138, 0.15);
		background: linear-gradient(
			180deg,
			#ffeaf0 0%,
			#ffffff 14%,
			#ffffff 100%
		);
		.user {
			width: 100%;
			padding: 48rpx 32rpx 24rpx;
			box-sizing: border-box;
			@include flex(center, space-between);
			image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 24rpx;
			}
			> view {
				width: calc(100% - 160rpx);
				font-size: 26rpx;
				color: #7c807f;
				line-height: 30rpx;
				.name {
					font-weight: bold;
					font-size: 40rpx;
					color: #1a1a1a;
					line-height: 40rpx;
					margin-bottom: 24rpx;
				}
				.xjs-line-two{
					line-height: 42rpx;
				}
			}
		}
		.introduce{
			width: 622rpx;
			font-size: 28rpx;
			padding-top: 24rpx;
			margin:0 auto 20rpx;
			box-sizing: border-box;
			border-top: 2rpx solid #e8d8dd;
			color: #7c807f;
			line-height: 1.5;
			-webkit-line-clamp: 3;
			line-clamp: 3;
		}
		.address {
			width: 436rpx;
			color: #5C5E5E;
			font-size: 28rpx;
			box-sizing: border-box;
			line-height: 1.5;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			.distance{
				color:#1B2120;
			}
			.address_conpent {
				// width: calc(100% - 128rpx);
				font-weight: normal;
				white-space: break-spaces;
				// white-space: nowrap;
				// overflow: hidden;
				// text-overflow: ellipsis;
			}
			image {
				width: 40rpx;
				height: 40rpx;
			}
			text {
				font-size: 28rpx;
				font-weight: bold;
			}
			.ge {
				margin: 0 8rpx;
				font-weight: 400;
				height: 28rpx;
			}
		}
		.list {
			// margin-top: 30rpx;
			width: 682rpx;
			height: 48rpx;
			margin: 0 auto;
		}
	}
}
.function {
	padding-bottom: 60rpx;
	.function_nav {
		position: sticky;
		top: 0;
		z-index: 98;
		padding: 40rpx 0 48rpx;
		@include flex(center, center);
		background: linear-gradient(
			180deg,
			rgba(249, 246, 246) 0%,
			#f9f6f6 100%
		);
		// background: #fff;
		view {
			height: 54rpx;
			color: #5c5e5e;
			font-size: 30rpx;
			margin-right: 90rpx;
			@include flex(center, center);
			flex-direction: column;
			position: relative;
			&:last-child {
				margin-right: 0;
			}
			image {
				width: 40rpx;
				height: 14rpx;
				margin-top: 4rpx;
				position: absolute;
				display: none;
				bottom: -18rpx;
				left: 50%;
				margin-left: -20rpx;
			}
		}
		.active {
			color: #1b2120;
			font-size: 40rpx;
			font-weight: bold;
			image {
				display: block;
			}
		}
	}
}
.service {
	padding: 0 32rpx;
	box-sizing: border-box;
}
.team {
	width: 100%;
	padding: 0 32rpx;
	margin-top: 80rpx;
	box-sizing: border-box;
	.team_title {
		@include flex(center, space-between);
		.name {
			font-weight: bold;
			font-size: 40rpx;
			color: #202020;
			text {
				color: #8e8c8c;
				font-size: 28rpx;
				font-weight: 400;
			}
		}
		.seeTo {
			color: #202020;
			font-size: 14px;
			@include flex(center);
			text {
				margin-left: 4rpx;
			}
		}
	}
	.banner {
		width: 100%;
		height: 230rpx;
		margin: 48rpx 0;
		border-radius: 24rpx;
	}
	.team_scroll {
		width: 100%;
		white-space: nowrap;
		.item {
			width: 268rpx;
			height: 334rpx;
			padding: 24rpx;
			display: inline-block;
			vertical-align: middle;
			margin-right: 16rpx;
			border-radius: 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			image {
				width: 136rpx;
				height: 136rpx;
				margin: 0 auto;
				display: block;
				border-radius: 50%;
			}
			.name {
				width: 100%;
				color: #1b2120;
				font-size: 30rpx;
				font-weight: bold;
				margin: 24rpx 0;
				text-align: center;
				word-break: break-all;
				word-wrap: break-word;
			}
			.describe {
				width: 100%;
				color: #808080;
				display: block;
				font-size: 24rpx;
				line-height: 36rpx;
				white-space: break-spaces;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2; /* 限制显示两行 */
				overflow: hidden;
				text-overflow: ellipsis; /* 超出部分显示省略号 */
			}
		}
	}
}
.dailyService {
	padding-left: 32rpx;
	box-sizing: border-box;
	.team_title {
		padding-right: 32rpx;
		box-sizing: border-box;
	}
	
	
}
.serviceEvaluation {
	.team_title {
		margin-bottom: 48rpx;
	}
}
.footer{
	position: fixed;
	bottom: 0;left: 0;
	width: 100vw;
	padding:8rpx 24rpx;
	padding-bottom: calc(var(--safe-area-bottom) + 4rpx);
	box-sizing: border-box;
	background-color: #ffffff;
	@include flex(center,space-between);
	view{
		width: 344rpx;
		height: 88rpx;
		color: #FF6084;
		font-size: 28rpx;
		border-radius: 44rpx;
		box-sizing: border-box;
		@include flex(center,center);
		border: 2rpx solid #FF6084;
		&:last-child{
			color: #FFFFFF;
			font-size: 28rpx;
			background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
		}
	}
}
::v-deep .loading-empty{
	>image{
		margin: 140rpx auto 30rpx !important;
	}
	>view{
		margin-bottom: 80rpx;
	}
}
.share{
	width: 132rpx;
	height: 64rpx;
	position: fixed;
	top: 16rpx;right: 0;
}
.popups{
	min-height: 20vh;
	padding:32rpx;
	box-sizing: border-box;
	.title{
		width: 100%;
		font-size: 26rpx;
		color: #1B2120;
		font-weight: bold;
		text-align: center;
		@include flex(center,space-between);
		text{
			width: 40rpx;
		}
	}
	.content{
		font-size: 28rpx;
		padding-top: 24rpx;
		box-sizing: border-box;
		color: #7c807f;
		line-height: 1.5;
		word-break: break-all;
		word-wrap: break-word;
	}
}
</style>
